<template>
  <div class="row">
    <div class="col-md-3 nav d-flex flex-column nav-pills me-3 p-3" id="v-pills-tab" role="tablist"
         aria-orientation="vertical">
      <div class="d-flex justify-content-center align-items-center flex-column mb-3">
        <div><span class="iconfont icon-geren"></span></div>
        <div>曹忠孝</div>
      </div>
      <nav class="nav flex-column">
        <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home"
                type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">个人信息
        </button>
        <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile"
                type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">报名信息
        </button>
        <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages"
                type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">我的作品
        </button>
        <button class="nav-link" id="v-pills-myTeam-tab" data-bs-toggle="pill" data-bs-target="#v-pills-myTeam"
                type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">我的队伍
        </button>
        <button class="nav-link" id="v-pills-message-tab" data-bs-toggle="pill" data-bs-target="#v-pills-message"
                type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">消息通知
        </button>
      </nav>
    </div>
    <div class="col tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
        <myInfo></myInfo>
      </div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
        <myApply></myApply>
      </div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
        <myWork></myWork>
      </div>
      <div class="tab-pane fade" id="v-pills-myTeam" role="tabpanel" aria-labelledby="v-pills-settings-tab">
        <div class="row">
          <myTeam></myTeam>
        </div>
      </div>
      <div class="tab-pane fade" id="v-pills-message" role="tabpanel" aria-labelledby="v-pills-settings-tab">
        <div class="row">
          <myMessage></myMessage>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import myInfo from "./myInfo";
import myApply from "./myApply";
import myTeam from "./myTeam";
import myMessage from "./myMessage";
import myWork from "./myWork";

export default {
  name: "mine",
  components: {
    myInfo,
    myApply,
    myTeam,
    myMessage,
    myWork,
  }
}
</script>

<style scoped>
.icon-geren {
  font-size: 64px;
  color: #0400ff;
}

.nav-link {
  color: #737373;
}

</style>